<style lang="scss" scoped>
    .hover-orange{
        transition: .3s;
        &:hover{
            color:orange !important;
        }
    }
</style>
<template>
        <div class="p40">
            <ui-title>发彩金</ui-title>
            <el-form ref="form" :model="form" style="width:500px">
                <el-form-item label="游戏公司" prop="companyName" :rules="{required: true,trigger:'change',message:'请输入名称'}">
                    <el-input v-model="form.companyName" @blur="clearSearchList" @keyup.native="searchCompany"  placeholder="输入公司名自动搜索"></el-input>
                    <div class="relative">
                        <div class="absolute bg-white shadow w-100" style="top:0;left:0;z-index:1">
                            <div v-for="item in companyList" @click="selectCompany(item)" class="cursor-pointer flex hover-orange m10">
                                <ui-img :url="item.ico" size="30px" class="ui-circle bg-grey"></ui-img>
                                <div class="flex-1 pl10 col-center clamp-1">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="领取网址" prop="url" :rules="{type:'url', required: true, message:'领取网址格式错误',trigger: 'blur'}">
                    <el-input v-model="form.url" type="url" placeholder="http:// 或 https:// 开头"></el-input>
                </el-form-item>
                <el-form-item label="彩金简介" prop="name" :rules="{required: true, message:'请输入彩金介绍',trigger: 'blur'}">
                    <el-input v-model="form.name" placeholder="请输入彩金介绍,越详细越好" type="textarea" :rows="6"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submit" :loading="submitCooling" class="ui-button-large" type="primary">提交</el-button>
                </el-form-item>
            </el-form>
            
            <el-button @click="$router.push('/coupon-history')" type="text">我发布的彩金</el-button>
        </div>

</template>
<script>
    export default {
        data(){
            return {
                form:{
                    companyName:'',
                    company_id:'',
                    url:'',
                    name:'',
                },
                companyList:[],
                selectedCompany:null,
                keyupCooling:false,
                submitCooling:false,
            }
        },
        methods:{
            searchCompany(){
                if (this.keyupCooling===true || this.form.companyName=='') {
                    return
                }

                this.keyupCooling  = true
                setTimeout(()=> {
                    this.keyupCooling  = false
                }, 2000);

                this.searching = true
                this.$http.get('index.php?g=home&m=GameCompany&a=company_list', {
                    params:{
                        name: this.companyName,
                        page_size:10
                    }
                })
                .then(({data})=>{
                    console.log('模糊查询公司:',data)
                    if (data.code===1) {
                        this.companyList = data.data
                    }
                })
            },
            selectCompany(item){//选择模糊查询的公司
                this.form.companyName = item.name
                this.form.url = item.url
                this.form.company_id = item.id
                this.companyList = []
            },
            clearSearchList(){
                setTimeout(() =>{
                    this.companyList=[]
                }, 300);
            },
            submit(){
                this.$refs['form'].validate((valid) => {
                    if (!valid) {
                        return
                    }

                    this.$http.post('index.php?g=home&m=GameCoupon&a=create_coupon', this.form)
                    .then(({data}) => {
                        console.log('发菠菜:',data);
                        if (data.code==1) {
                            // 跳转到已发布的列表
                            this.$confirm('是否立即前往发布列表?', '发布成功', {
                              confirmButtonText: '确定',
                              cancelButtonText: '取消',
                            }).then(() => {
                                this.$router.replace('/coupon-history')
                            }).catch(() => {
                                this.$router.go(-1)         
                            })
                        }
                    }).catch((e) => {
                        console.warn('发菠菜失败', e);
                        this.$alert('服务器错误,发布失败')
                    })
                });
                
            }
        },
    }
</script>